<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>申请仲裁 / 上传复审</title>
	<!-- 基本框架 -->
	<link rel="stylesheet" href="../../../css/common.css">
	<script src="../../../script/vue.min.js" type="text/javascript"></script>
	<script src="../../../script/frame.js" type="text/javascript"></script>
	<script src="../../../script/baseConfig.js" type="text/javascript"></script>
	<script src="../../../script/utils.js" type="text/javascript"></script>
	<script src="../../../script/common.js" type="text/javascript"></script>
	<style>
		#container{
			padding:0;
		}
		.arb_head{
			font-size:0.27rem;
			padding:0 0.35rem;
			line-height:0.7rem;
			height:0.7rem;
			font-weight:300;
			overflow:hidden;
		}
		.arb_head .left{
			float:left;
			color:#A4A3A3;
		}
		.arb_head .right{
			float:right;
			color:#5297FF;
		}
		.arb_post{
			background:linear-gradient(to right,#ff2626 0%,#fd6e1f 70%);
			color:#FFF;
			width:calc((100% - 0.7rem));
			display: block;
			margin:0px auto;
			height:1rem;
			line-height:1rem;
			text-align:center;
			font-size:0.31rem;
			border-radius:0.06rem;
			margin-top:0.5rem;
			border:0;
		}
		.u-inputText{
			position: relative;
			padding:0.25rem 0.3rem;
			background:#FFF;
		}
		.u-inputText .arb_text{
			height:3.5rem;
			width:100%;
			display:block;
			font-size:0.29rem;
			color:#2f2f2f;
			line-height:0.5rem;
			padding-bottom: .1rem;
		}
		.u-inputText ._astrict{
			position: absolute;
			width: 100%;
			right: .15rem;
			bottom: .12rem;
			color: #d4d4d4;
			text-align: right;
			background: linear-gradient(to bottom, rgba(255,255,255,0),rgba(255,255,255,1),rgba(255,255,255,1))
		}
		.videoImgList{
			padding:0.35rem 0.35rem;
		}
		.videoImgList div{
			width:calc((100% - 1.2rem) / 5)!important;
			margin-bottom:0.25rem;
			margin-right:0.3rem;
			position:relative;
			background:#000;
			float:left;
		}
		.videoImgList div:nth-child(5n){
			margin-right:0;
		}
		.videoImgList div img{
			display: block;
			object-fit: cover;
			height:100%;
			width:100%;
		}
		.videoImgList div i{
			width:0.35rem;
			height:0.35rem;
			position:absolute;
			z-index: 9;
			right:-0.175rem;
			top:-0.175rem;
			background:url(../../../image/icons/close.png) no-repeat center center;
			background-size:45%;
			background-color:#FFF;
			border-radius:50%;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div id="container">
			<div class="arb_head clearfix">
				<div class="left">仲裁内容</div>
				<!--div class="right">必看说明</div-->
			</div>
			<div class="u-inputText">
				<textarea v-model.trim="remark" class="arb_text" maxlength="2000"></textarea>
				<div class="_astrict">文字数量：{{remark.length}}/2000</div>
			</div>
			<div class="videoImgList clearfix">
				<div :style="{'height':('calc(('+imgHeight+'px - 0.7rem - 0.9rem) / 5)')}" v-for="(item, index) in imgs" >
					<img :src="getMediaUrl(item.url)" />
					<i @click="delImg(item.id)"></i>
				</div>
				<div :style="{'height':('calc(('+imgHeight+'px - 0.7rem - 0.9rem) / 5)')}" @click="chooseImg">
					<img src="../../../image/task/addImg.png" />
				</div>

			</div>
			<button @click="submit" class="arb_post">立即提交</button>
		</div>
	</div>
	<script type="text/javascript">
		apiready = function() {
			var iOSDialog = api.require('iOSDialog');

			var app = new Vue({
				el:'#app',
				data:{
					imgHeight:document.body.clientWidth,
					remark: '',
					ta_id: 0,
					ta_log_id: 0,
					bid: '',
					mate: '',
					imgs: [],
					iosTest:false,
				},
				created: function(){
					this.ta_id = api.pageParam.data.id;
					this.ta_log_id = api.pageParam.data.logId;
					this.bid = $.createBid();
				},
				methods:{
					getMediaUrl: function(url){
						var exc = url.substr(url.lastIndexOf('.')+1).toLocaleLowerCase();
						if(['jpg','jpeg','gif','png','webp'].indexOf(exc) != -1){
							return url;
						}
						return '../../../image/task/video.png';
					},
					chooseImg: function(){
						var _this = this;
						api.getPicture({
							sourceType: 'album',
							encodingType: 'jpg',
							mediaValue: 'pic',
							destinationType: 'url',
							quality: 80,
						}, function(ret, err) {
							if (ret && ret.data) {
								var bid = $.createUploadPrefix(CONFIG.constants.TASK, 'img')+'-'+_this.bid;
								_this.uploadFile(ret.data, bid);
							}
						});
					},
					chooseMedia: function(){
						var _this = this;
						var param = {title:"请选择文件类型",items:["图片","视频"]};
						iOSDialog.actionSheetDialog(param,function(ret, err){
							if(ret.index == 1){
								api.getPicture({
									sourceType: 'album',
									encodingType: 'jpg',
									mediaValue: 'pic',
									destinationType: 'url',
									quality: 80,
								}, function(ret, err) {
									if (ret && ret.data) {
										var bid = $.createUploadPrefix(CONFIG.constants.TASK, 'img')+'-'+_this.bid;
										_this.uploadFile(ret.data, bid);
									}
								});
							}else if(ret.index == 2){
								api.getPicture({
									sourceType: 'album',
									mediaValue: 'video',
									destinationType: 'url',
									videoQuality: 'medium',
								}, function(ret, err) {
									if (ret && ret.data) {
										var bid = $.createUploadPrefix(CONFIG.constants.TASK, 'video')+'-'+_this.bid;
										_this.uploadFile(ret.data, bid);
									}
								});
							}
						});
					},
					uploadFile: function(file, bid){
                        var _this = this;
                        var avatar = this.avatar;
                        $.ajax({
                            url: '/file/upload',
                            method: 'post',
							load: true,
							timeout: 180,
                            data: {
                                files: {
                                    file: file,
                                },
                                values: {
                                    bid: bid
                                }
                            },
                            success: function(res){
								var img = {
									id : res.data.id,
									url: res.data.url
								};
								_this.imgs.push(img);
                            },
                            error: function(err){
                                $.toast(err.message);
                            }
                        });
					},
					delImg: function(id){
						var imgs = this.imgs;
						for(var i=0; i<imgs.length; i++){
							if(imgs[i].id == id){
								this.imgs.splice(i,1);
								break;
							}
						}
					},
					submit: function(){
						if(this.remark == ''){
							$.toast('仲裁内容不能为空哦');
							return false;
						}
						var _this = this;
						$.confirm({
						    title: '提示',
						    msg: '请正确填写原因哦，恶意提交可能会导致封禁权限？',
						    buttons: ['取消','确定'],
						    success:function(){
						        var imgs = _this.imgs;
						        var mates = [];
						        for(var i=0; i<imgs.length; i++){
						        	mates.push(imgs[i].id);
						        }
						        $.ajax({
						        	url: '/task/arbitration/my_info/detail',
						        	method: 'post',
						        	load:true,
						        	data: {
						        		ta_id: _this.ta_id,
						        		ta_log_id: _this.ta_log_id,
						        		remark: _this.remark,
						        		bid: $.createUploadPrefix()+'-'+_this.bid,
						        		mate: mates.join(','),
						        	},
						        	success: function(res){
										api.sendEvent({
				                            name: 'updateArbitrationDetail',
				                            extra: {
				                                loadFlush: true
				                            }
				                        });
						        		api.sendEvent({name: 'updateMyMsg'});
						        		api.closeWin();
						        	},
						        });
						    }
						});
					},
				},
				mounted(){
					$.initJs(this);
				}
			});
		}
	</script>
</body>
</html>
